@charset "utf-8";

@import "reset";

$close:#b60005;
$c5:#c5c5c5;
$b2:#b20000;
$b8:#8b8b8b;
$c4:#444444;
$d7:#7d7d7d;

$font-size:40px;
@function r($px){
    @return $px/$font-size * 1rem;
}


/***行内元素强制换行***/
@mixin newline{
  content: "\A";
  white-space: pre;
}

/***1px的边框***/
@mixin border{
    border-bottom: 1px dashed #dcd3d3;
}

/***图片溢出处理***/
@mixin imgoverflow{
    overflow: hidden;
    text-align: center;
}
img{
    width: 100%;
    vertical-align: middle;
}
/***文字溢出处理***/
/**单行**/
.textover{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/**多行**/
@mixin textover2{
    display: -webkit-box;  
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}

.border-top{
    border-bottom: 1px solid #e2e2e2;
}


html,body{
    height: 100%;
}

.web{
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    section{
        width: 100%;
        position: absolute;
        top: r(96px);
        bottom: r(114px);
        -webkit-overflow-scrolling: touch;
        overflow: scroll;
    }
    header{
        width: 100%;
        position: absolute;
//      height: 100px;
        background: #b20000;
        top: 0;
        padding: r(22px) r(17px) r(24px);
        .search{
            width: r(42px);
            height: r(42px);
            border: 2px solid white;
            border-radius: 50%;
            text-align: center;
            line-height: r(42px);
            i{
                font-size: r(27px);
                color: white;
            }
        }
        .menu{
            i{
                font-size: r(42px);
                color: white;
            }
        }
        .logo{
            overflow: hidden;
            text-align: center;
            img{
                width: r(264px);
                height: r(39px);
            }
        }
        
    }
    footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        background: #f5f5f5;
        border-top: #bbb9ba 1px;
        ul{
            li{
                float: left;
                width: 20%;
                text-align: center;
                padding-top: r(16px);
                padding-bottom: r(12px);
                i{
                    font-size: r(48px);
                    color: #8B8B8B;
                }
                h2{
                    font-size: r(17px);
                    color: #8b8b8b;
                    margin-top:r(12px);
                }
            }
        }
    }
    /*搜索页面*/
   .search_page{
        position: relative;
        height: 100%;
        background: #f1f1f1;
        transform: translateY(-100%);
        transition: transform .4s ease-in;
        /*搜索关键字页面**/
        .search_key{
            position: absolute;
            transform: translateX(0);
            transition: transform .4s ease-in;
        }
       /*搜索结果页面*/
       .search_result{
            width: 100%;
            height: 100%;
            position: absolute;
            left: -100%;
            background: #f1f1f1;
            transition: all .4s ease-in;
            .result_list{
                margin: r(15px) r(30px) 0px r(30px);
                padding: r(15px);
                background: #ffffff;
                color: #898989;
                &:nth-of-type(2){
                    margin-top:r(30px) ;
                }
                 h2{
                    color: #595757;
                    font-size: r(27px);
                }
                p{
                    margin-top: r(12px);
                    margin-bottom: r(5px);
                    font-size: r(22px);
                    -webkit-line-clamp:4;  
                    @include textover2;
                }
                span{
                    font-size: r(18px);
                    display: inline-block;
                    margin-right: r(30px);
                }
            }
       }
        .search_top{
            height: r(88px);
            line-height: r(88px);
            padding: 0px r(14px) 0px r(14px);
            background: #1f1f1f;
            i{
                float: left;
                color: $close;
                font-size: r(51px);
                vertical-align: middle;
            }
            /**搜索框**/
            .input_s{
                margin: 0 auto;
                width: r(534px);
                height: r(52px);
                border:r(4px) #d2d2d2 solid ;
                border-radius: r(25px);
                margin-top: r(18px);
                margin-left: r(10px);
                padding-left: r(14px);
                line-height: r(46px);
                font-size: 0;
                color: #fff;
                input{
                    height: r(50px);
                    line-height: r(50px);
                    margin-left: r(18px);
                    padding-left: r(4px);
                    font-size: r(24px);
                    border: none;
                    background: none;
                    width: r(195px);
                    vertical-align: middle;
                }
                i{
                    font-size: r(27px);
                    color: #fff;
                    vertical-align: middle;
                }
            }
        }
         /** keyword**/
        .search_keyword{
            margin-left: r(28px);
            font-size: 0;
            p{
                font-size: r(27px);
                color: #211d1d;
                font-weight: bold;
                margin: r(32px) 0px r(12px) 0px;
            }
            span{
                display: inline-block;
                font-size: r(30px);
                background: #fff;
                margin-right: r(8px);
                margin-bottom: r(10px);
                border: 1px solid #e4e4e4;
                padding: r(12px) r(18px);
                &.active{
                    background: #FF0000;
                }
            }
        }
    }
}


/***左边隐藏界面***/
.leftcontent{
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    transition: all .4s ease-in;
    /***个人菜单页面***/
    .permenu{
        width:100%;
        height: 100%;
        background: #222222;
        /***顶部搜索栏***/
        .p_top{
            height: r(88px);
            line-height: r(88px);
            margin: 0px r(14px) 0px r(14px);
            i{
                color: $close;
                font-size: r(51px);
                vertical-align: middle;
            }
        }
        /***中间头像登录部分***/
       .p_center{
           text-align: center;
           padding-bottom: r(56px);
           border-bottom: r(24px) solid #303030;
           .pic_wrap{
               width: r(130px);
               @include imgoverflow;
               margin: r(82px) auto 0px; 
            }
            a{
                display: block;
            }
            .login_btn{
               font-size: r(25px);  
               color: #fff;  
               margin: r(22px) 0px 1px;
            }
            .psword{
               font-size:r(20px);  
               color: #525252  
            }      
        }
    }
    
    /***用户登录界面***/
    .login{
        position: absolute;
        width: 100%;
        height: 100%;
        background: #222222;
        padding: r(194px) r(75px) 0px;
//      text-align: center;
        .close{
            position: absolute;
            top: r(30px);
            left: r(30px);
           i{
                font-size: r(40px);
                color: red;
           }
        }
        /**登录界面logo**/
        .login_logo{
            width: r(161px);
            height: r(136px);
            @include imgoverflow;
            margin: 0 auto r(48px);
        }
        /***用户名、密码部分***/
        .phone,.password{
            width: r(492px);
            height: r(55px);
            margin: 0 auto;
            div{
                display: inline-block;
            }
        }
        .password{
           margin:r(16px) auto r(10px);
        }
        /**左边图标**/
        .icon{
            width: r(60px);
            height: 100%;
            background: #303030;
            text-align: center;
            line-height: r(54px);
            i{
                font-size: r(30px);
                color: #fff;
                vertical-align: middle;
            }
        }
        .l_input{
            overflow: hidden;
            width: r(432px);
            height: 100%;
            background: #3d3d3d;
            padding-left: r(40px);
            line-height: r(50px);
            input{
                width: 100%;
                border: none;
                background: none;
                vertical-align: middle;
                &::-webkit-placeholder{
                    font-size: r(20px);
                }
            }
        }
        /**忘记密码**/
        .forget{
            width: r(492px);
            height: r(46px);
//          text-align: right;
            line-height: r(46px);
            margin: 0 auto;
            i{
                font-size: r(19px);
                color: #fff;
                float: right;
                vertical-align: middle;
            }
            a{
                color: #fff;
                font-size: r(20px);
                vertical-align: middle;
                float: right;
            }
        }
        /**登录、注册按钮**/
        button{
            height: r(54px);
            width: r(492px);
            color: #fff;
            font-size: r(23px);
            &.denglu{
                background: #b60005;
                margin-top: r(50px);
            }
            &.register{
                border: 2px solid red;
                margin-top:r(14px) ;
                background:#303030 ;
            }
        }
    }
   
    /***用户已登录界面***/
    .profile{
        position: absolute;
        right: 100%;
        width: 100%;
        height: 100%;
        background: #222222;
        transition: all .4s ease-in;
        text-align: center;
        .close{
            margin: r(18px);
            margin-bottom:r(32px) ;
            text-align: left;
            i{
                font-size: r(51px);
                color: #b60005;
            }
        }
        .profile_head{
            color: #fff;
            text-align: center;
            border-bottom: r(24px) solid #303030;
            div{
                margin: 0 auto;
                i{
                    font-size: r(22px);
                    color: #eeca02;
                }
                &:last-of-type{
                    font-size: r(23px);
                    margin: r(10px) 0px r(16px) ;
                    span:nth-of-type(2),span:last-of-type{
                        color: #b60005;
                    }
                }
            }
            .headimg{
                width: r(134px);
                @include imgoverflow;
                border-radius: 50%;
            }
            .name{
                font-size: r(25px);
                margin-top: r(17px);
                margin-bottom: r(5px);
                a{
                    display: inline-block;
                    color: #fff;
                    font-size: r(14px);
                    border: 1px solid #fff;
                    margin-left: r(5px);
                }
            }
            button{
                width: r(220px);
                height: r(53px);
                font-size: r(23px);
                text-align: center;
                border-radius: r(25px);
                color: #fff;
                margin-bottom: r(20px);
                &.shoucang{
                    background: #b60005;
                }
                &.fabu{
                    margin-left: r(22px);
                }
            }
        }
        .p_bottom{
            margin:0px r(30px);
            .gimc{
                display: block;
                width: 100%;
                font-size: r(23px);
                color: #656565;
                line-height: r(40px);
                padding: r(28px) r(30px);
                border-bottom: 1px solid #656565;
                &:last-of-type{
                    border: none;
                }
                p{
                    float: left;
                }
                i{
                    float: right;
                    font-size: r(13px);
                }
            }
            .drop_down{
                display: none;
            }
        }
        .turn{
            width: r(180px);
            height: r(53px);
            color: #fff;
            font-size: r(23px);
            border-radius: r(26px);
            background: #b60005;
            margin-top: r(30px);
        }
    }
}


.border_bottom{
    border-bottom:1px solid #484848;
}

/**加载更多**/
.content_bottom{
    height: r(60px);
    font-size:r(22px);
    color: #bbbbbb;
    text-align: center;
    line-height: r(50px);
    margin: 0px r(30px);
    border-top: 1px solid #bbbbbb;
    span{
        vertical-align: middle;
    }
}

